<template>
	<view class="container">
		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box" @click="navToGoodsSearch">
			<text class="iconfont icon-saoyisao"></text>
			<view class="inputBox">
				<text class="iconfont icon-hao"></text> 
				<input class="ser-input" type="text" :value="hotSearch" disabled />
			</view>
			<text class="iconfont icon-pinglun"></text>
		</view>
		<!-- #endif -->
		
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
			<swiper class="carousel" circular @change="swiperChange" autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="tabLink(index)">
					<image :src="item.icon" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<!-- <view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view> -->
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view v-for="(item,index) in cat_nav" :key='index' class="cateIcon">
				<view class="cate-item" @click="classify(item.link)">
					<image :src="item.icon"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="noticeBox">
			<view class="notImg"><image src="../../static/news.png"></image></view>
			<view class="uni-swiper-msg">
				<swiper vertical="true" autoplay="true" circular="true" interval="3000" class="notice">
					<swiper-item v-for="(item, index) in announcement" :key="index">
						<text @click="ac(item.id)">{{item.title}}</text>
					</swiper-item>
				</swiper>
			</view>
			<view class="yticon icon-you"> </view>
		</view>
		<!-- 活动图 -->
		<view class="ad-1"><image :src="activity_img.icon" mode="scaleToFill" @click="activeLink(activity_img.href)"></image></view>

		<!-- 团购 -->
		<!-- <view class="f-header m-t">
			<image src="/static/buyBg.png"></image>
			<view class="tit-box">
				<text class="tit">团购活动</text>
				<text class="tit2">Boutique Group Buying</text>
			</view>
			<text class="yticon icon-you"></text>
		</view>
		<view class="goopBuy">
			<view class="groop">
				<view class="title" @click='groopBuy'>团购</view>
				<view class="conts">
					<view class="rows" v-for="(groop,index) in tg" :key='index' @click="navToGoodsDetail(groop.goods_id)">
						<view class="img"><image :src="groop.img" mode=""></image></view>
						<view class="price">￥{{groop.retail_price}}</view>
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="homeNav">
			<!-- <view class="navInfo" :class="isOk?'fixedNav':''"> -->
			<view class="navInfo" >
				<view class="nav" v-for="(nav,index) in middleData" :key='index' :class="currindex == index? 'curr' : ''" @click="navClick(index)">
					<view class="tit">{{nav.name}}</view>
					<text class="info" v-if='isShow'>{{nav.info}}</text>
				</view>
			</view>
			<!-- 内容 -->
			<view class="navCont">
				<block v-for="(res,index) in middleData" v-if="currindex == index">
					<view class="guess-section">
						<view v-for="(item, indexx) in res.goods" :key="indexx" class="guess-item" @click="navToGoodsDetail(item.id)">
							<view class="image-wrapper"><image :src="item.img" mode="aspectFill"></image></view>
							<text class="title clamp">{{item.name}}</text>
							<text class="price">￥{{item.retail_price}}{{item.id}}</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<!-- 分类精选 -->
		<view class="f-header m-t">
			<image src="/static/img/h1.png"></image>
			<view class="tit-box">
				<text class="tit">分类精选</text>
				<text class="tit2">Competitive Products For You</text>
			</view>
			<text class="yticon icon-you"></text>
		</view>
		<!-- 热门推荐 -->
		<!-- <view class="f-header m-t">
			<image src="/static/video/axc.png"></image>
			<view class="tit-box">
				<text class="tit">热门推荐</text>
				<text class="tit2">Hot search goods</text>
			</view>
			<text class="yticon icon-you"></text>
		</view> -->
		<view class="homeNav">
			<view class="navCont">
				<view class="guess-section">
					<view v-for="(item, index) in listData" :key="index" class="guess-item" @click="navToGoodsDetail(item.id)">
						<view class="image-wrapper"><image :src="item.img" mode="aspectFill"></image></view>
						<text class="title clamp">{{item.name}}</text>
						<text class="price">￥{{item.retail_price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {mapState} from 'vuex';
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				carouselList: [],          //顶部轮播
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				cat_nav:[],                //分类导航
				announcement:[],           //公告
				activity_img:[],           //中间活动图
				//ms:[],                     //秒杀
				tg:[],                     //团购
				//live:[],                   //直播
				navData:[],                //下方导航
				isOk:false,
				isShow: true,
				currindex:0,
				middleData:[],
				listData:[],               //导航对应数据
				banner:'',  
				cateH:'', 
				advH:'',  
				seckH:'', 
				hotSearch:' 华为Mate 99 系列'
			};
		},
		computed: {
			...mapState(['hasLogin','userInfo']),
		},
		onShow() {
			var that = this
			let _param = {}
			if(that.hasLogin){
				_param = {token:that.userInfo.token}
			}
			this.$api.getUrl(this.$api._api.ApiIndexIndex, _param, function(res){

					that.carouselList = res.adv['index_top']
					that.titleNViewBackground = res.adv['index_top'][0].back_color
					that.swiperLength = res.adv['index_top'].length
					
					that.announcement = res.gg
					that.cat_nav = res.menu
					that.activity_img = res.adv['index_middle'][0]
					that.tg = res.group_goods
					//that.navData = _data.data.navData
					that.middleData = res.rec_goods
					that.listData = res.rec_goods[1].goods
					
					that.hotSearch = res.hot_search
					//消息通知状态转换
					/*
					let _userInfo = uni.getStorageSync("userInfo");
					if(_userInfo){
						let index = 1
						const pages = getCurrentPages();
						const page = pages[pages.length - 1];
						const currentWebview = page.$getAppWebview();
						if(_userInfo.article_view == _data.data.article_view){
							if(_userInfo.article_view){
								currentWebview.hideTitleNViewButtonRedDot({
									index
								});
								that.$set(_userInfo,'reddot_show',false)
							}else{
								currentWebview.showTitleNViewButtonRedDot({
									index
								});
								that.$set(_userInfo,'reddot_show',false)
							}
							that.login(_userInfo)
						}else{
							if(_data.data.article_view){
								currentWebview.hideTitleNViewButtonRedDot({
									index
								});
								that.$set(_userInfo,'reddot_show',false)
							}else{
								currentWebview.showTitleNViewButtonRedDot({
									index
								});
								that.$set(_userInfo,'reddot_show',true)
							}
							that.$set(_userInfo,'article_view',_data.data.article_view)
							that.login(_userInfo)
						}
					}*/

			})
	
			this.$api.setCartNumber();
		},
		onLoad() {},
		onPageScroll(obj){
			// 获取头部轮播的高度
			uni.createSelectorQuery().select(".carousel-section").boundingClientRect((res)=>{
				if(res) this.banner = res.height;
			}).exec();
			// 获取分类的高度
			uni.createSelectorQuery().select(".cate-section").boundingClientRect((res)=>{
				if(res) this.cateH = res.height;
			}).exec();
			// 获取活动图的高度
			uni.createSelectorQuery().select(".ad-1").boundingClientRect((res)=>{
				if(res) this.advH = res.height;
			}).exec();
			// 获取秒杀楼层的高度
			uni.createSelectorQuery().select(".seckill-section").boundingClientRect((res)=>{
				if(res) this.seckH = res.height;
			}).exec();
			
			var heightT = this.banner + this.cateH + this.advH + this.seckH -120
			if(obj.scrollTop >= heightT){
				this.isOk = true
				this.isShow = false
			}else{
				this.isOk = false
				this.isShow = true
			}
		},
		methods: {
			...mapMutations(['login']),
			//点击导航栏 buttons 时触发
			onNavigationBarButtonTap:function(e){
				const index = e.index;
				if (index === 0) {           //扫码
					uni.scanCode({
					    success: function (res) {
					    }
					});
				} else if (index === 1) {    //通知
					/* const pages = getCurrentPages();
					const page = pages[pages.length - 1];
					const currentWebview = page.$getAppWebview();
					currentWebview.hideTitleNViewButtonRedDot({
						index
					}); */
					uni.navigateTo({
						url: '/pagesA/notice/notice'
					})
				}
			},
			//搜索跳转
			onNavigationBarSearchInputClicked: async function(e) {
				uni.navigateTo({
					url:'/pagesA/search/search'
				})
			},
			// 公告
			ac:function(id){
				uni.navigateTo({
					url: '/pagesA/announcement/announcement?id='+id
				})
			},
			//轮播点击跳转
			tabLink:function(index){
				if(this.carouselList[index].link){
					uni.navigateTo({
						url:this.carouselList[index].link
					})
				}
			},
			//轮播图切换修改背景色
			swiperChange:function(e){
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].back_color;
			},
			//图标点击跳转
			classify:function(link){
				if(link){
					uni.navigateTo({
						url:link,
						fail(res) {
							console.log(res)
						}
					})
				}
			},
			//活动图跳转
			activeLink:function(_url){
				if(_url){
					uni.navigateTo({
						url:_url
					})
				}
			},
			// 导航
			navClick:function(index){
				this.currindex = index
			},
			
			//商品详情页
			navToGoodsDetail:function(goods_id){
				uni.navigateTo({
					url:'/pages/category/product/product?id='+goods_id
				})
			},
			navToGoodsSearch:function(){
				uni.navigateTo({
					url:'/pagesA/search/search'
				})
			}
		},
	}
</script>

<style lang="scss">
	/* 公告滚动 */
	.noticeBox{display: flex;padding:0 30rpx;height:70rpx;overflow: hidden;line-height:70rpx;}
	.noticeBox .iconfont{margin-right: 10rpx;color:#ecaf19;font-size:40rpx;}
	.uni-swiper-msg{flex: 1;margin: 0 20rpx;}
	.noticeBox .notice{font-size:26upx;}
	.noticeBox .icon-dibudaohanglan-{color:#ccc;margin-right: -16rpx;}
	.notImg image{width: 96rpx;height: 23rpx;}
	/* 猜你喜欢 */
	.guess-section{
		margin-top: 10rpx;
		display:flex;
		flex-wrap:wrap;
		padding: 0 20rpx;
		.guess-item{
			background: #fff;
			border-radius:10rpx;
			overflow: hidden;
			display:flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 30rpx;
			margin-bottom: 4%;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330rpx;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size:28rpx;
			color: $font-color-dark;
			line-height: 80rpx;
			padding: 0 20rpx;
		}
		.price{
			font-size:32rpx;
			color: $uni-color-primary;
			line-height: 1;
			padding: 0 20rpx;
		}
	}
	.guess-section{
		.liveWeb{
			height: 480rpx;position:relative;
			image{filter: brightness(70%)}
			.lives{
				position: absolute;top:20rpx;left:20rpx;font-size:24rpx;color:#fff;
				background: rgba(0,0,0,0.2);height:40rpx;line-height:40rpx;border-radius:8rpx;overflow: hidden;
				.live{background:#FA436A;height:40rpx;line-height:40rpx;display: inline-block;padding-right: 10rpx;
					position: relative;padding-left:30rpx;}
				.live:before{position: absolute;content:'';width: 10rpx;height: 10rpx;left:10rpx;
				top:calc(50% - 5rpx);background: #fff;border-radius: 50%;}
				.watch{padding: 0 10rpx;}
			}
			.title,.perInfo{position: absolute;left:0rpx;right:0rpx;color:#fff;}
			.title{bottom:60rpx;}
			.perInfo{
				bottom:20rpx;display: flex;align-items: center;padding: 0 20rpx;
				.head{width:40rpx;height:40rpx;border-radius: 50%;overflow: hidden;}
				.info{margin: 0 10rpx; flex: 1;color:#fff;font-size:24rpx;}
				.perNum{display: flex;align-items: center;}
				.perNum .iconfont{display: block;width:35rpx;height:35rpx;background:#FA436A;color:#fff;
				border-radius: 50%;text-align: center;line-height:35rpx;font-size: 21rpx;}
				.perNum .nums{font-size:21rpx;color:#fff;margin-left: 10rpx;}
			}
		}
	}
	.goopBuy{
		/* border-top:20rpx solid #f0f0f0; */
		display: flex;
		.groop{padding: 20rpx;flex: 1;
			.title{font-size:30rpx;font-weight: bold;color:#222;}
			.conts{margin-top:20rpx;display: flex;align-items: center;}
			.rows{background:rgba(250,67,106,0.05);padding:20rpx 0;width: 50%;
			text-align: center;border-radius:6rpx;}
			.img{width: 100rpx;height: 100rpx;overflow: hidden;margin: 0 auto;}
			image{width: 100%;height: 100%;object-fit: cover;}
			.price{margin-top: 10rpx;color:#FA436A;font-size: 30rpx;}
			.rows:nth-child(1){margin-right: 20rpx;}
		}
	}
	/* #ifdef MP */
	.mp-search-box{
		position:absolute;
		left: 0;
		top: 30rpx;
		z-index: 9999;
		width: 100%;
		padding: 0 8rpx;
		display: flex;
		.iconfont{color:#fff;font-size: 40rpx;}
		.inputBox{padding: 0 15rpx;align-items: center;
			display: flex;flex: 1;background: rgba(255,255,255,.6);border-radius: 20px;margin: 0 20rpx;
			.ser-input{
				// flex:1;
				height: 56rpx;
				line-height: 56rpx;
				// text-align: center;
				font-size: 28rpx;
				color:$font-color-base;
			}
			.iconfont{color:$font-color-base;}
		}
	}
	page{
		background:#fff;
		.cate-section{
			position:relative;
			z-index:5;
			//border-radius:16rpx 16rpx 0 0;
			margin-top:-20rpx;
			
		}
		.carousel-section{
			padding: 0;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				background: #f6f6f6;
				.carousel-item{
					padding: 0;
				}
			}
			.swiper-dots{
				left:45rpx;
				bottom:40rpx;
			}
		}
	}
	/* #endif */
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426rpx;
			transition: .4s;
		}
	}
	.carousel {
		width: 100%;
		height: 350rpx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28rpx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60rpx;
		bottom: 15rpx;
		width: 72rpx;
		height: 36rpx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50px;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 36rpx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36rpx;
			font-size: 12rpx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	/* 分类 */
	.cate-section {
		display: flex;
		align-items: center;
		flex-wrap:wrap;
		padding: 30rpx 22rpx; 
		background: #f6f6f6;
		.cateIcon{
			width: 20%;margin:16rpx 0;
		}
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2rpx;
			color: $font-color-dark;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88rpx;
			height: 88rpx;
			margin-bottom: 14rpx;
			//border-radius: 50%;
			//opacity: .7;
			//box-shadow: 4rpx 4rpx 20rpx rgba(250, 67, 106, 0.3);
		}
	}
	.ad-1{
		width: 100%;
		height: 210rpx;
		padding: 10rpx 10rpx;
		background: #f1f1f1;
		image{
			width:100%;
			height: 100%; 
		}
	}
	

	page{background:#fff;}
	.homeNav{background:#f0f0f0;padding-top: 22rpx;}
	.navInfo,.fixedNav{padding:20rpx 0;display: flex;align-items: center;justify-content: space-between;}
	.navInfo .nav{font-size: 21rpx;color: #999;text-align: center;flex: 1;}
	.navInfo .nav:not(:last-child){border-right: 2rpx solid #eae9e9;}
	.navInfo .nav .tit{font-size:32rpx;font-weight:bold;color:#333;}
	.navInfo .nav .info{background:transparent;display: inline-block;margin-top:10rpx;padding:2rpx 15rpx;border-radius: 30rpx;}
	.navInfo .curr .tit{color:#fa436a;}
	.navInfo .curr .info{background:#fa436a;color:#fff;}
	
	.fixedNav{position: fixed;top:70px;left: 0;right: 0;background:#fff;z-index:5555;
		// #ifdef MP-WEIXIN
		top: 0;
		// #endif
	}
	.fixedNav .curr .tit{position: relative;}
	.fixedNav .curr .tit::after{position: absolute;content: '';width:80rpx;height: 6rpx;background:#fa436a;
	left: calc(50% - 40rpx);bottom:-20rpx;border-radius: 50rpx;}
	
	/* 隐藏左右滚动条 */
	scroll-view ::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}
	
	.f-header{
		display:flex;
		align-items:center;
		height: 140rpx;
		padding: 6rpx 30rpx 8rpx;
		//margin-bottom: 40rpx;
		background: #fff;
		image{
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
		}
		.tit-box{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
		.tit{
			font-size: $font-lg +2rpx;
			color: #font-color-dark;
			line-height: 1.3;
		}
		.tit2{
			font-size: $font-sm;
			color: $font-color-light;
		}
		.icon-you{
			font-size: $font-lg +2rpx;
			color: $font-color-light;
		}
	}
</style>
